<template>
  <template v-for="item in menuList" :key="item.name" >
    <!-- 没有子路由 -->
     <template v-if="!item.children" >
      <el-menu-item v-if="!item.meta.hidden" :index="item.name" @click="to">
        <el-icon v-if="item.meta && item.meta.icon">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.meta.title }}</span>
        </template>
      </el-menu-item>
     </template>
    
    <!-- 有一个子路由 -->
    <template v-if="item.children && item.children.length === 1 && item.meta.showChild">
      <el-menu-item
       v-if="!item.children[0].meta.hidden"
       :index="item.children[0].name"
       @click="to">
        <el-icon v-if="item.children[0].meta && item.children[0].meta.icon">
          <component :is="item.children[0].meta.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.children[0].meta.title }}</span>    
        </template>
      </el-menu-item>
    </template>
    <!-- 有多个子路由 -->
    <template v-if="item.children && item.children.length > 0 && !item.meta.showChild">
      <el-sub-menu v-if="!item.meta.hidden" :index="item.name" :popper-offset="10">
       
        <template #title >
          <el-icon v-if="item.meta && item.meta.icon">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>

        <MyMenu :menu-list="item.children"></MyMenu>
      </el-sub-menu>
    </template>
  </template>
  
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
defineProps(['menuList'])

let $router = useRouter()

const to = (item) => {
  
  $router.push({
    name: item.index
  })
}

</script>
<script lang="ts">
export default {
  name: 'MyMenu'
}
</script>

<style lang="scss">
  .my-item {
    display: flex;
    align-items: center;
  }
  .el-sub-menu {  
    .el-sub-menu__title:hover {
        font-weight: bold;
        color: #fff;
    }
    .el-menu-item {
        text-indent: 8px;
    } 
  }
  .el-menu-item {
    &:hover {
          font-weight: bold;
          color: #fff;
          // background: linear-gradient(90deg, rgba(155,188,255,.8), rgba(155,188,255,.1));
      }
    &.is-active {
          background: linear-gradient(90deg, rgba(155,188,255,.8), rgba(155,188,255,.1));
          font-weight: bold;    
      }
  }
  .el-menu--popup {
    .el-menu-item {
      background: #fff;
      color: #333;
    }
    .el-menu-item:hover {
      font-weight: bold;
    }
    .el-menu-item.is-active {
      // background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(155,188,255,.1));
      background: linear-gradient(90deg, rgba(155,188,255,.8), rgba(155,188,255,.1));
      font-weight: bold;   
    }
  }
</style>
